<template>
	<view class="goods-main">
		<z-paging style="height: 100% !important;" class="wrap" ref="paging" v-model="goodsList" @query="queryList">
			<cu-custom slot="top" bgColor="bg-blue" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="content">巡检设备列表</block>
			</cu-custom>
			<sl-filter :themeColor="themeColor" :menuList="menuList" @result="result" @resetMenuList="resetMenuList"></sl-filter>
			<view slot="top" class="search">
				<u-search placeholder="请输入设备名" v-model="getData.KeyWord" @custom='search()' @search='search()'></u-search>
			</view>
			<!-- 商品列表开始 -->
			<view v-for="(item, index) in goodsList" class="goods-item-wrap">
				<image :src='baseImage+item.DeviceImages' class="goods-image"/>
				<view class="goods-content-wrap">
					<view class="goods-name">
						<!--0 未填写， 1 填报中，2 已完成-->
						<view :class="item.SignStatus==0?'stateColor3':item.SignStatus==1?'stateColor2':'stateColor1'"></view>
						{{ item.DeviceTitle }}
					</view>

					<view class="goods-stock-wrap1">
						<!--1绿 2 橙  3红-->
						<view v-if="item.SignStatus==2" class="changeColor11">已巡检</view>
						<view v-if="item.SignStatus==1" class="changeColor22">巡检中</view>
						<view v-if="item.SignStatus==0" class="changeColor33">未巡检</view>
					</view>
					<view class="goods-stock-wrap">
						<view class="goods-stock">设备位号：{{ item.DeviceNumber }}</view>
						<view class="goods-sell-count">设备类型：{{ item.COnfigValue }}</view>
					</view>
					<view class="goods-option" @click.stop="">
						<view class="bottom">
							<!-- <view @click="goDetail(item.Id)"  class="btnBox">
								<view class="evaluate btn">详情</view>
							</view> -->
							<view  class="btnBox1">
								<!--0 未填写， 1 填报中，2 已完成-->
								<view v-if="item.SignStatus==2" @click="goTopic(item.Id,item.DeviceTitle,0,true)" class="evaluate1 btn3">查看</view>
								<view v-if="item.SignStatus==0" @click="goTopic(item.Id,item.DeviceTitle,1,false)" class="evaluate1 btn1">去巡检</view>
								<view v-if="item.SignStatus==1" @click="goTopic(item.Id,item.DeviceTitle,1,false)" class="evaluate1 btn2">继续填写</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 商品列表结束 -->
		</z-paging>
	</view>
</template>

<script>
	import request from '@/common/request.js';
	import slFilter from '@/components/sl-filter/sl-filter.vue';
	export default {
		components: {
			slFilter
		},
		data() {
			return {
				goodsList: [],
				goodsNav: 0,
				getData:{
					KeyWord:'',
					signId:'',
					qrcodeId:'',
					deviceType:'',
					scanStatus:-1,
					jobId:''
				},
				baseImage:this.$request22.baseUrl1,
				deviceimg:this.$request22.baseUrl1+'/Resource/Sg/device/deviceimg.png',
				themeColor: '#0079FE',
				filterResult: '',
				menuList: [
					{
						'title': '设备分类',
						'detailTitle': '设备类别可多选',
						'isMutiple': false,
						'key': 'deviceclass',
						'detailList': [{
								'title': '不限',
								'value': ''
							}
						]
					},
					{
						'title': '巡检状态',
						'detailTitle': '巡检状态',
						'isMutiple': false,
						'key': 'scanStatus',
						//<!--0 未填写， 1 填报中，2 已完成-->
						'detailList': [{
								'title': '不限',
								'value': '-1'
							},
							{
								'title': '未填写',
								'value': '0'
							},
							{
								'title': '填报中',
								'value': '1'
							},
							{
								'title': '已完成',
								'value': '2'
							}
						]
					}
				]
			}
		},
		onLoad(option) {
			let that=this
			that.getData.signId=option.signid
			that.getData.qrcodeId=option.qrcodeid
			
			uni.$on('IsRefresh',function(data){
				console.log('传过来的data：'+data)
				if(data){
					that.queryList(1,10)
				}
			})
		},
		onUnload() {
			uni.$off('IsRefresh')
		},
		mounted() {
			let that=this
			that.getSearchOptions()
		},
		methods: {
			goTopic(deviceId,DeviceTitle,showButton,onlyShow){
				let that=this
				//去答题
				uni.navigateTo({
					url: '/pages-patrol/deviceTopic?deviceId='+deviceId+'&signId='+that.getData.signId
					+'&qrcodeId='+that.getData.qrcodeId+'&deviceTitle='+DeviceTitle+'&showButton='+showButton+'&onlyShow='+onlyShow
				})	
			},
			qrcodeClickNoJob(Id) {
				uni.showLoading({
					title: '提交中'
				})
				let that = this;
				let opts = {
					url: 'api/SavingQrcodeDirect',
					method: 'get'
				};
				let savingRequestData={
					nfcId:'',
					qrcodeId:Id,
					jobId:'',
					longitude:'',
					latitude:'',
					isCheckDevice:true,
					isNFC:false
				}
				//获取点位详情
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy:true,
					success(res3) {
						savingRequestData.latitude = res3.latitude;
						savingRequestData.longitude = res3.longitude;
						request.httpTokenRequest(opts,savingRequestData).then(res => {
							if(res.data.code == 1){
								uni.hideLoading();
								//去答题
								uni.navigateTo({
									url: '/pages-others/deviceCheck?qrcodeid='+savingRequestData.qrcodeId+'&signid='+res.data.msg+'&noJob=1'
								})
							}
							else{
								uni.hideLoading();
								uni.showToast({ title: res.data.msg, icon: 'none' });
							}
						});
					},
					fail: function () {
						uni.hideLoading();
						uni.showToast({
							title: '定位失败，请退出登陆重新开启定位',
							icon:'none',
							duration: 4000
						});
					}
				});
			},
			resetMenuList(){
				console.log('resetMenuList')
			},
			getSearchOptions(){
				let that=this
				let opts = {
					url: 'QrcodeDevice/GetDeviceSearchOptions',
					method: 'get'
				};
				request.httpTokenRequest(opts).then(res => {
					if(res.data.code == 1){
						//console.log(res.data.data)
						let deviceTypeList =res.data.data
						
						if(deviceTypeList!=null&&deviceTypeList.length>0){
							let datalist=[]
							let entity={
								title:'不限',
								value:''
							}
							datalist.push(entity)
							for(let i=0;i<deviceTypeList.length;i++){
								let entity={
									title:deviceTypeList[i].COnfigValue,
									value:deviceTypeList[i].ConfigKey
								}
								datalist.push(entity)
							}
							that.menuList[0].detailList=datalist
							//console.log(that.menuList[0].detailList)
						}
					}
					else{
						uni.showToast({ title: res.data.msg, icon: 'none' });
					}
				});
			},
			result(val) {
				console.log('result')
				console.log(val)
				
				let deviceclass=val.deviceclass
				this.getData.deviceType=deviceclass
				
				let scanStatus=val.scanStatus
				this.getData.scanStatus=scanStatus
				this.queryList(1,10)
				this.filterResult = JSON.stringify(val, null, 2)
			},
			queryList(pageNo, pageSize) {
				console.log('queryList')
				var that = this;
				uni.showLoading({
					title: '加载中...'
				})
				let opts = {
					url: 'QrcodeDevice/GetQrcodeDeviceList',
					method: 'get'
				};
				that.getData.PageIndex=pageNo;
				that.getData.PageSize=pageSize;
				uni.getStorage({
					key: 'JobId',
					success: function (res) {
						that.getData.jobId=res.data.id
						request.httpTokenRequest(opts,that.getData).then(res => {
							if(res.data.code == 1){
								that.$refs.paging.complete(res.data.data);
								uni.hideLoading();
							}
							else{
								uni.showToast({ title: res.data.msg, icon: 'none' });
							}
						});
					},fail() {
						uni.hideLoading();
						uni.showToast({ title:'请选择计划', icon: 'none' });
						return;
					}
				});
			},
			// 搜索框
			search(e){
				let that=this
				that.goodsList=[]
				that.getData.PageIndex=1;
				that.getData.PageSize=10;
				that.getData.KeyWord=e
				this.queryList(1,10);
			},
			setNav(goodsNav) {
				console.log('setNav')
				let that=this
				that.goodsNav = goodsNav
				console.log("tap set nav " + goodsNav);
				that.goodsList=[]
				that.getData.PageIndex=1;
				that.getData.PageSize=10;
				that.getData.QrcodeStatus=goodsNav
				that.queryList(1,10);
			},
		}
	}
</script>

<style scoped lang="scss">
	.search{
		width: 100%;
		height: 100rpx;
		padding: 20rpx 2% 0 2%;
		background-color: #fff;
		// display: flex;
		// align-items: center;
	}
	.goods-main {
		min-height: 100vh;
		background: #f7f8fa;
		padding-top: 0rpx;
		padding-bottom: 240rpx;
	}

	.goods-item-wrap {
		background: #FFFFFF;
		display: flex;
		padding: 24rpx;
		margin: 12rpx;
		border-radius: 8rpx;
	}

	.goods-content-wrap {
		padding-left: 24rpx;
	}

	.goods-option {
		display: flex;
	}

	.goods-option-item {
		background: #f4f4f6;
	}

	.goods-image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 12rpx;
		flex: none;
	}
	/* 状态色 */
	.stateColor1{
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		border: 10rpx solid #fff;
		background-color: #1ab394;
		position: absolute;
		left: -45rpx;
		top: -20rpx;
	}
	.stateColor2{
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		border: 10rpx solid #fff;
		background-color: #f8ac59;
		position: absolute;
		left: -45rpx;
		top: -20rpx;
	}
	.stateColor3{
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		border: 10rpx solid #fff;
		background-color: #ed5565;
		position: absolute;
		left: -45rpx;
		top: -20rpx;
	}
	.changeColor11{
		color:#1ab394;
		font-weight: 600;
		font-size: 26rpx;
	}
	.changeColor22{
		color:#f8ac59;
		font-weight: 600;
		font-size: 26rpx;
	}
	.changeColor33{
		color:#ed5565;
		font-weight: 600;
		font-size: 26rpx;
	}
	.goods-name {
		font-size: 32rpx;
		font-weight: bold;
		display: flex;
		position: relative;
	}

	.goods-stock-wrap {
		display: flex;
		color: #969696;
		font-size: 24rpx;
		margin-top: 12rpx;
	}
	.goods-stock-wrap1 {
		display: flex;
		//color: #969696;
		font-size: 24rpx;
		margin-top: 10rpx;
		font-size:28rpx;
		font-weight: 500;
	}
	.goods-stock {
		margin-right: 24rpx;
	}

	.goods-price {
		font-size:36rpx;
		color: #e7612e;
		margin-top: 24rpx;
	}

	.goods-option-item {
		padding: 8rpx 16rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
		margin-top: 24rpx;
	}

	.goods-option-item:not(:last-child) {
		margin-right: 24rpx;
	}
	/* 需要根据状态改变颜色 */
	.goods-option-item-action {
		background: rgba(26, 179, 148, 0.2);
		color: #1ab394;
	}
	.changeColor1{
		background: rgba(26, 179, 148, 0.2);
		color: #1ab394;
	}
	.changeColor2{
		background: rgba(248, 172, 89, 0.2);
		color: #f8ac59;
	}
	.changeColor3{
		background: rgba(237, 85, 101, 0.2);
		color: #ed5565;
	}
	.goods-item-wrap {
		margin-top: 24rpx;
	}

	.goods-header-wrap {
		display: flex;
		align-items: center;
		padding: 24rpx;
		background: #FFFFFF;
	}

	.goods-header-item-action {
		font-size: 36rpx;
		font-color: #333333;
		font-weight: bold;
		position: relative;
	}

	.goods-header-item-action::after {
		position: absolute;
		left: 0;
		right: 0;
		background: #4372fe;
		height: 8rpx;
		content: "";
		bottom: -12rpx;
	}

	.goods-header-item {
		margin-right: 24rpx;
	}
	
	
	.bottom {
		margin-top: 20rpx;
		line-height: 70rpx;
		display: flex;
		align-items: right;
		.btnBox{
			width: 150rpx;
			display: flex;
			justify-content: space-between;
			float:right;
			margin-right: 10rpx;
		
			.btn {
				line-height: 52rpx;
				width: 140rpx;
				border-radius: 26rpx;
				border: 2rpx solid $u-tips-color;
				font-size: 26rpx;
				text-align: center;
				color: $u-tips-color;
			}
			.evaluate {
				color: $u-type-primary;
				border-color: $u-type-primary;
			}
		}
		.btnBox1{
			width: 150rpx;
			display: flex;
			justify-content: space-between;
			float:right;
		
			.btn1 {
				line-height: 52rpx;
				width: 140rpx;
				border-radius: 26rpx;
				font-size: 26rpx;
				text-align: center;
				color: white;
				background-color:$u-type-primary;
			}
			.btn2 {
				line-height: 52rpx;
				width: 140rpx;
				border-radius: 26rpx;
				font-size: 26rpx;
				text-align: center;
				color: white;
				background-color:#f8ac59;
			}
			.btn3 {
				line-height: 52rpx;
				width: 140rpx;
				border-radius: 26rpx;
				font-size: 26rpx;
				text-align: center;
				color: white;
				background-color:#1ab394;
			}
			.evaluate1 {
				color: white;
			}
		}
	}

</style>
